<!-- 店铺审核报表 -->
<template>
  <div class="audit-report">
    <div class="audit-report__header">
      <el-radio-group v-model="dataViewDate" @change="changeHandle">
        <el-radio-button label="">全部</el-radio-button>
        <el-radio-button :label="1">今天</el-radio-button>
        <el-radio-button :label="3">最近三天</el-radio-button>
        <el-radio-button :label="7">最近七天</el-radio-button>
        <el-radio-button :label="30">最近30天</el-radio-button>
        <el-radio-button :label="4" class="el-radio-button-inner-datepicker">
          <el-date-picker v-model="dataViewRange" type="daterange" align="right" unlink-panels range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" :picker-options="pickerOptions"
            @focus="focusPickerDate" @change="changeDataViewDate"></el-date-picker>
        </el-radio-button>
      </el-radio-group>
    </div>

    <div class="audit-report__total">
      <div id="order_total_flex">
        <div class="total_row_item">
          <div class="order_content">
            <div class="order_total_title">新开店铺数</div>
            <div class="order_total_info">
              <span class="order_data">{{ totalData.newOpenNum || 0 }}</span>
            </div>
          </div>
        </div>
        <div class="total_row_item">
          <div class="order_content">
            <div class="order_total_title">
              工商信息变更数
            </div>
            <div class="order_total_info">
              <span class="order_data">{{ totalData.businessInfoChangeNum || 0 }}</span>
            </div>
          </div>
        </div>
        <div class="total_row_item">
          <div class="order_content">
            <div class="order_total_title">总部审核中</div>
            <div class="order_total_info">
              <span class="order_data">{{ totalData.headAuditNum || 0 }}</span>
            </div>
          </div>
        </div>
        <div class="total_row_item">
          <div class="order_content">
            <div class="order_total_title">
              银行审核中
            </div>
            <div class="order_total_info">
              <span class="order_data">{{ totalData.bankAuditNum || 0 }}</span>
            </div>
          </div>
        </div>
        <div class="total_row_item">
          <div class="order_content">
            <div class="order_total_title">
              大区审核中
            </div>
            <div class="order_total_info">
              <span class="order_data">{{ totalData.upOrgAuditNum || 0 }}</span>
            </div>
          </div>
        </div>
        <div class="total_row_item">
          <div class="order_content">
            <div class="order_total_title">
              审核不通过
            </div>
            <div class="order_total_info">
              <span class="order_data">{{ totalData.auditNotPassNum || 0 }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="audit-report__form">
      <div class="audit-report__form--item">
        <span class="label">所属大区</span>
        <el-input v-model="formInline.upOrgZone" placeholder="请输入所属大区"></el-input>
      </div>
      <div class="audit-report__form--btn">
        <el-button type="primary" size="mini" icon="el-icon-search"
          @click="() => { listQuery.current = 1; search() }">查询</el-button>
        <el-button @click="kong()" size="mini" icon="el-icon-delete">重置</el-button>
        <el-button :loading="exportLoading" type="success" @click="exportExcel()" size="mini" icon="el-icon-s-data">导出</el-button>
      </div>
    </div>

    <div class="audit-report__table">
      <el-table :data="tableData" :header-cell-style="{ background: '#eef1f6', color: '#606266' }" border
        v-loading="loading">
        <el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
        <el-table-column label="所属大区" prop="upOrgZone" align="center"></el-table-column>
        <el-table-column label="新开店铺数" prop="newOpenNum" width="235px" align="center"></el-table-column>
        <el-table-column label="工商信息变更数" prop="businessInfoChangeNum" align="center"></el-table-column>
        <el-table-column label="总部审核中" prop="headAuditNum" align="center"></el-table-column>
        <el-table-column label="银行审核中" prop="bankAuditNum" align="center"></el-table-column>
        <el-table-column label="大区审核中 " prop="upOrgAuditNum" align="center"></el-table-column>
        <el-table-column label="审核不通过" prop="auditNotPassNum" align="center"></el-table-column>
      </el-table>
    </div>

    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="listQuery.current" :page-sizes="[10, 20, 30, 50, 100, 150, 200]" :page-size="listQuery.size"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {
  queryStoreReviewStatList,
  queryStoreReviewStatHead,
  exportStoreReviewStatList
} from '@/api/maineseeReports';
import { formatDate } from '@/utils/format-data';
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: '最近3天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            },
          },
        ],
      },
      dataViewDate: '',
      dataViewRange: '',
      formInline: {
        startDate: '',
        endDate: '',
        upOrgZone: ''
      },
      totalData: {},
      tableData: [],
      loading: false,
      listQuery: {
        current: 1,
        size: 10
      },
      total: 0,
      exportLoading: false
    }
  },
  created() {
    this.search();
  },
  methods: {
    changeHandle(value) {
      if (value && value !== 4) {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * value);
        this.formInline.startDate = formatDate(start, 'yyyy-MM-dd');
        this.formInline.endDate = formatDate(end, 'yyyy-MM-dd');
      } else {
        this.formInline.startDate = '';
        this.formInline.endDate = '';
      }

      if (!value || value !== 4) {
        this.listQuery.current = 1;
        this.search();
      }
    },
    changeDataViewDate(value) {
      this.dataViewDate = 4;
      if (value && value.length > 0) {
        this.formInline.startDate = value[0];
        this.formInline.endDate = value[1];
      } else {
        this.formInline.startDate = '';
        this.formInline.endDate = '';
      }

      this.listQuery.current = 1;
      this.search();
    },
    focusPickerDate() {
      console.log('失去焦点');
    },

    search() {
      this.getHeadTotal();
      this.getList();
    },

    getHeadTotal() {
      queryStoreReviewStatHead({
        size: 10,
        current: 1,
        condition: {
          ...this.formInline
        },
        ascs: [],
        descs: [],
      }).then(res => {
        if (res.code == 1) {
          this.totalData = res.result;
        } else {
          this.$message.error(res.message);
        }
      })
    },

    getList() {
      this.loading = true;
      queryStoreReviewStatList({
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {
          ...this.formInline
        },
        ascs: [],
        descs: [],
      }).then(res => {
        if (res.code == 1) {
          this.tableData = res.records;
          this.total = res.total;
          this.listQuery.current = res.current;
          this.listQuery.size = res.size;
        } else {
          this.$message.error(res.message);
        }
      }).finally(() => {
        this.loading = false;
      })
    },

    handleSizeChange(val) {
      this.listQuery.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.getList();
    },

    kong() {
      this.formInline.upOrgZone = '';
    },

    exportExcel() {
      this.exportLoading = true;
      let data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {
          ...this.formInline
        },
        ascs: [],
        descs: []
      }
      exportStoreReviewStatList(data).then(res => {
        const byteCharacters = atob(res); //将base64转换为二进制字符串
        const byteNumbers = new Array(byteCharacters.length);
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i);
        }
        const byteArray = new Uint8Array(byteNumbers);

        const link = document.createElement("a");
        let blob = new Blob([byteArray], {
          type: "application/vnd.ms-excel"
        });
        link.style.display = "none";
        //设置连接
        link.href = URL.createObjectURL(blob);
        link.download = "门店审核报表.xlsx";
        document.body.appendChild(link);
        //模拟点击事件
        link.click();
      }).finally(() => {
        this.exportLoading = false;
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.audit-report {
  margin: 20px 0;

  &__header {
    /deep/ .el-radio-button-inner-datepicker {
      .el-radio-button__inner {
        padding: 0;
      }

      .el-input__inner {
        border: none;
        height: 38px;
      }
    }
  }

  &__total {
    margin: 20px 0;

    #order_total_flex {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-around;

      /deep/ .order_content {
        cursor: pointer;
        width: 200px;
        padding: 20px 0;
        margin: 0 auto;
        text-align: center;
        overflow: hidden;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);

        .order_total_title {
          color: #000;
        }

        .order_total_info {
          margin-top: 10px;
        }

        .order_data {
          font-size: 1.4em;
          font-weight: bold;
        }
      }

      /deep/ .order_detail {
        width: 200px;
        margin-top: 10px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
      }

      /deep/ .order_content2 {
        width: 60px;
        cursor: pointer;
        padding: 10px 0;
        margin: 0 1px;
        text-align: center;
        overflow: hidden;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
      }
    }
  }

  &__form {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    &--item {
      display: flex;
      align-items: center;
      gap: 10px;
      .label {
        color: #606266;
        font-size: 14px;
        white-space: nowrap;
      }
    }
  }
}
</style>